@import "~./color.less";
// 软件内定义
@primary: #3a8ee6;
@success: @green;
@info: #909399;
@warning: #e6a23c;
@danger: #f56c6c;
@error: @red;
@bg-color: #f5f7fa;
@tip-color: #c0c4cc;

.noselect() {
    -webkit-touch-callout: none;
    user-select: none;
}

.btn-style(@c: @primary, @f: #fff) {
    width: 100%;
    height: 38px;
    text-align: center;
    color: @f;
    border: none;
    background-color: @c;
    border-radius: 3px;
    .magic-color;
}

.btn-outline-style(@c: #fff, @f: @primary) {
    width: 100%;
    height: 38px;
    text-align: center;
    color: @f;
    border: 1px solid @f;
    background-color: @c;
    border-radius: 3px;
}

.select-style {
    width: 100%;
    height: 33px;
    padding: 5px 12px;
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    border-radius: 3px;

    &:focus {
        border-color: @primary;
        box-shadow: 0 0 8px rgba(102, 175, 233, .6);
    }
}

.ellipsis(@line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: @line;
    -webkit-box-orient: vertical;
}

.fixed-full() {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.abs-full() {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.reddot {
    position: relative;
    display: inline-block;
    padding-right: .35em;

    &:after {
        display: inline-block;
        content: " ";
        position: absolute;
        right: .05em;
        top: .2em;
        overflow: hidden;
        width: .35em;
        height: .35em;
        background: #f00;
        border: 1px solid #fff;
        border-radius: .5em;
    }
}

.hover-color(@hover) {
    cursor: pointer;

    &:hover {
        color: @hover;
    }
}

.magic-color(@bg: @primary) when (lightness(@bg) >=80%) {
    color: #000;
}

.magic-color(@bg: @primary) when (lightness(@bg) < 80%) {
    color: #fff;
}

.magic-color(@bg: @primary, @c: #191919) {
    background: @bg;
    cursor: pointer;

    &:hover {
        background: @bg - @c;
    }

    &.selected {
        background: @bg - @c;
    }

    &.active {
        background: @bg - @c * 3;
    }

    &:disabled,
    &.disabled {
        background: @bg + @c;
        opacity: .65;
        cursor: not-allowed;
    }
}

.outline-color(@color: @primary, @c: #090909) {
    background: #fff;
    color: @color;
    border: 1px solid @color;
    cursor: pointer;

    &:hover {
        background: @color;
        color: #fff;
    }

    &.selected {
        background: @color - @c;
        border-color: @color - @c;
    }

    &:active,
    &.active {
        background: @color - @c * 2;
        border-color: @color - @c * 2;
    }

    &:disabled,
    &.disabled {
        opacity: .65;
        cursor: not-allowed;
        background: #fff;
        color: @color;
        border: 1px solid @color;
    }
}

.color-selector(@opacity: 1) {
    &.success {
        background: rgba(64, 158, 63, @opacity);
        color: #fff;
    }

    &.error {
        background: rgba(219, 82, 75, @opacity);
        color: #fff;
    }

    &.warning {
        background: rgba(238, 152, 0, @opacity);
        color: #fff;
    }

    &.info {
        background: rgba(38, 175, 215, @opacity);
        color: #fff;
    }

    &.primary {
        background: rgba(36, 95, 146, @opacity);
        color: #fff;
    }

    &.red {
        background: rgba(243, 51, 69, @opacity);
        color: #fff;
    }

    &.red {
        background: rgba(28, 27, 32, @opacity);
        color: #fff;
    }
}

.magic-selector(@color: @primary) {
    &.success {
        .magic-color(@success);
    }

    &.danger {
        .magic-color(@danger);
    }

    &.warning {
        .magic-color(@warning);
    }

    &.info {
        .magic-color(@info);
    }

    &.primary {
        .magic-color(@primary);
    }

    &.red {
        .magic-color(@red);
    }

    &.blue {
        .magic-color(@blue);
    }

    &.yellow {
        .magic-color(@yellow);
    }

    &.light-blue {
        .magic-color(@light-blue);
    }

    .magic-color(@color);
}

.outline-selector(@opacity: 1) {
    &.success {
        .outline-color(rgba(64, 158, 63, @opacity));
    }

    &.error {
        .outline-color(rgba(219, 82, 75, @opacity));
    }

    &.warning {
        .outline-color(rgba(238, 152, 0, @opacity));
    }

    &.info {
        .outline-color(rgba(38, 175, 215, @opacity));
    }

    &.primary {
        .outline-color(rgba(36, 95, 146, @opacity));
    }

    &.red {
        .outline-color(rgba(243, 51, 69, @opacity));
    }

    &.blue {
        .outline-color(rgba(56, 146, 231, @opacity));
    }

    &.yellow {
        .outline-color(rgba(244, 162, 60, @opacity));
    }

    &.lightblue {
        .outline-color(rgba(123, 193, 207, @opacity));
    }

    .outline-color();
}

.loading(@t: 1.3s, @n: loading) {
    @keyframes @n {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    animation: loading @t linear infinite;
}

.transition(@d) {
    -webkit-transition-duration: @d;
    transition-duration: @d;
}

.delay(@d) {
    -webkit-transition-delay: @d;
    transition-delay: @d;
}

.transform(@t) {
    -webkit-transform: @t;
    transform: @t;
}

.transform-origin(@to) {
    -webkit-transform-origin: @to;
    transform-origin: @to;
}

.translate3d(@x: 0, @y: 0, @z: 0) {
    -webkit-transform: translate3d(@x, @y, @z);
    transform: translate3d(@x, @y, @z);
}

.animation (@a) {
    -webkit-animation: @a;
    animation: @a;
}

.scrollable() {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.flex-shrink(@fs) {
    -webkit-box-flex: @fs;
    -webkit-flex-shrink: @fs;
    -ms-flex: 0 @fs auto;
    flex-shrink: @fs;
}

.clearfix() {

    &:after,
    &:before {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }
}

.hairline(@position, @color) when (@position =top) {
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        height: 1px;
        width: 100%;
        background-color: @color;
        display: block;
        z-index: 15;

        // .transform-origin(50% 0%);
        html.pixel-ratio-2 & {
            .transform(scaleY(0.5));
        }

        html.pixel-ratio-3 & {
            .transform(scaleY(0.33));
        }
    }
}

.hairline(@position, @color) when (@position =left) {
    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 15;

        // .transform-origin(0% 50%);
        html.pixel-ratio-2 & {
            .transform(scaleX(0.5));
        }

        html.pixel-ratio-3 & {
            .transform(scaleX(0.33));
        }
    }

}

.hairline(@position, @color) when (@position =bottom) {
    &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: auto;
        top: auto;
        height: 1px;
        width: 100%;
        background-color: @color;
        display: block;
        z-index: 15;

        html.pixel-ratio-2 & {
            .transform(scaleY(0.5));
        }

        html.pixel-ratio-3 & {
            .transform(scaleY(0.33));
        }
    }
}

.hairline(@position, @color) when (@position =right) {
    &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        left: auto;
        bottom: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 15;

        // .transform-origin(100% 50%);
        html.pixel-ratio-2 & {
            .transform(scaleX(0.5));
        }

        html.pixel-ratio-3 & {
            .transform(scaleX(0.33));
        }
    }
}

// For right and bottom
.hairline-remove(@position) when not (@position =left) and not (@position =top) {
    &:after {
        display: none;
    }
}

// For left and top
.hairline-remove(@position) when not (@position =right) and not (@position =bottom) {
    &:before {
        display: none;
    }
}

// For right and bottom
.hairline-color(@position, @color) when not (@position =left) and not (@position =top) {
    &:after {
        background-color: @color;
    }
}

// For left and top
.hairline-color(@position, @color) when not (@position =right) and not (@position =bottom) {
    &:before {
        background-color: @color;
    }
}

// Encoded SVG Background
.encoded-svg-background(@svg) {
    @url: `encodeURIComponent(@{svg})`;
    background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}

// Preserve3D
.preserve3d() {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

// Shadow
.depth(@level: 1) {
    & when (@level =1) {
        box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
    }

    & when (@level =2) {
        box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
    }

    & when (@level =3) {
        box-shadow: rgba(0, 0, 0, 0.188235) 0px 10px 30px, rgba(0, 0, 0, 0.227451) 0px 6px 10px;
    }

    & when (@level =4) {
        box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
    }

    & when (@level =5) {
        box-shadow: rgba(0, 0, 0, 0.298039) 0px 19px 60px, rgba(0, 0, 0, 0.219608) 0px 15px 20px;
    }
}

// Highlighted Links
.active-highlight(@color: rgba(255, 255, 255, 0.15)) {
    &:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: @color;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        opacity: 0;
        pointer-events: none;
        .transition(600ms);
    }

    &.active-state:before,
    html:not(.watch-active-state) &:active:before {
        opacity: 1;
        .transition(150ms);
    }
}

.active-highlight-color(@color) {
    &:before {
        background-image: -webkit-radial-gradient(center, circle cover, @color 66%, rgba(red(@color), green(@color), blue(@color), 0) 66%);
        background-image: radial-gradient(circle at center, @color 66%, rgba(red(@color), green(@color), blue(@color), 0) 66%);
    }
}

// No Scrollbar
.no-scrollbar() {
    &::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none;
        opacity: 0 !important;
    }
}


.ellipsis() {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
}